<!--
 * @Author:shawnXiao
 * @Date: 2021-12-23 15:17:10
 * @LastEditTime: 2021-12-26 16:48:56
 * @Description: 层级tab
 * @FilePath: /vite2-vue3-typescript/src/components/HierarchyTabsCom/index.vue
-->
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    activeKey: {
      required: true,
      type: String || Number,
    },
    tabData: {
      required: true,
      type: <any>[],
    },
  },
  emits: ['changeTab'],
  setup(_props: any, context: any) {
    const changeTab = (id: any) => {
      context.emit('changeTab', id)
    }
    return {
      changeTab,
    }
  },
})
</script>

<template>
  <div class="TabsComChild">
    <a-tabs v-model:activeKey="$props.activeKey" @change="changeTab" size="small">
      <a-tab-pane v-for="item in tabData" :key="item?.id || item?.key" :tab="item?.title">
        <slot
          v-if="
            Object.prototype.toString.call(item) === '[object Object]' && Object.keys(item).length
          "
          :item="item"
        ></slot>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
